<template>
  <view class="mySearch">
    <my-title :title="'搜索'" @myBack="back"></my-title>
    <view class="search"> 
      <uni-search-bar @confirm="search" placeholder="请输入您想要的内容"></uni-search-bar>
    </view>  
    <view class="btm">
      <text style="font-size: 20px;font-weight: bold;">搜索历史</text>
      <view class="search-history">
        <block v-for="(item,i) in historys" :key="i">
          <view class="item">
            <image @click="toDetail(item)" :src="item.img" class="img"></image>
            <text style="font-size: 20px;font-weight: bold;display: block;margin-bottom: 5px;">{{item.text}}</text>
            <view class="site">
              <uni-icons type="map-pin-ellipse" size="15"></uni-icons>
              <text style="display:flex; 10px;color: #1296db;margin-left: 5px;">{{item.site}}</text>
            </view>   
          </view>
        </block>   
      </view>
    </view>
    <view class="btm1">
      <view class="fire-search">
        <text style="font-size: 17px;font-weight: bold;">热门推荐</text>
        <view class="searchs">
          <block v-for="(item,i) in suggs" :key="i">
            <view class="item">
              <my-suggest :sugg="item"></my-suggest>
            </view> 
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        historys: [
          {
            id:0,
            img:'https://pic.quanjing.com/1c/nv/QJ6194773230.jpg@%21350h',
            text:'长城',
            site:'中国，北京'
          },
          {
            id: 1,
            img:'https://img1.baidu.com/it/u=3918618449,3358612554&fm=253&fmt=auto&app=138&f=JPEG',
            text:'好莱坞',
            site:'美国，洛杉矶'
          }
        ],
        suggs: [
          {
            img: 'https://img2.baidu.com/it/u=3577383383,4098815069&fm=253&fmt=auto&app=138&f=JPEG',
            text: '中国必去十大景点',
            time: '2022 - 12月'
          },
          {
            img: 'https://n.sinaimg.cn/sinakd20122/30/w1080h1350/20201210/2fdf-keyancx8665021.jpg',
            text: '最美黄昏',
            time: '2022 - 12月'
          }
        ]
      
      };
    },
    methods : {
      back() {
        // uni.navigateBack({
        //   delta: 1,
        // })
        console.log('search')
        uni.switchTab({
          url:'/pages/home/home'
        })
      }, 
      toDetail(item) {
        // console.log(JSON.stringify(item))
        // item.img = decodeURIComponent(item.img)+''
        uni.navigateTo({  
          // url:'/subpkg/detail/detail?data=' + JSON.stringify(item)
          // url:'/subpkg/detail/detail?data=' + JSON.stringify(item)
          url:'/subpkg/detail/detail?data=' + item.id
          
      })
      }
    }
  }
</script>

<style lang="scss">
.mySearch {
  .search {
      padding: 0 25rpx;
  }
  .btm {
      padding: 0 25rpx;
    .search-history {
      margin: 40rpx 20rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        margin: 30rpx 0;
        width: 150px;
        height: 170px;          
        display: flex;
        flex-direction: column;
        .img {
          width: 100%;
          height: 70%;
          margin-bottom: 5px;
        }
        .site {
          display: flex;
        
        }
      }
    }
  }
  .btm1 {
      padding: 0 25rpx;
    .searchs {
      .item {
        padding: 20rpx 0;
        // padding-right: 20rpx;
      }
    }
  }
}
</style>
